<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="layout w-full h-full box-border bg-white p-[20px]" ref="RefLayout">
        <div class="search box-border pb-[20px]">
          <a-row>
            <a-col :span="12">
              <SeachInput
                class="search-item"
                v-model="filterData.asset_package_code"
                placeholder="请输入资产编号搜索"
                style="width: 328px"
                allow-clear
                @clear="getTableData"
              >
              </SeachInput>
              <a-button
                class="ml-2 bg-[#E5EFFE!important] cursor-pointer"
                @click="moreFilterKey = !moreFilterKey"
              >
                <template #icon>
                  <icon-filter style="color: #1459fa" />
                </template>
              </a-button>
            </a-col>
          </a-row>
          <div
            class="more-filter-box w-full h-[80px] mt-[20px] mb-0 p-[20px] pl-[10px] pr-[10px] box-border bg-[#F7F9FC]"
            v-if="moreFilterKey"
          >
            <a-row class="w-full h-[40px] overflow-hidden" justify="start">
              <a-col :span="6">
                <TextInput
                  class="search-item"
                  v-model="filterData.asset_package_name"
                  placeholder="请输入资产名称"
                  allow-clear
                  @change="getTableData"
                >
                  <template #prefix> 资产名称 </template>
                </TextInput>
              </a-col>
              <a-col :span="6">
                <SelectInput
                  class="search-item"
                  v-model="filterData.project_id"
                  placeholder="请输入关联项目"
                  allow-clear
                  @change="getTableData"
                >
                  <template #prefix> 关联项目 </template>
                  <a-option :value="item.code" v-for="item in options" :key="item.id">{{
                    item.name
                  }}</a-option>
                </SelectInput>
              </a-col>
              <a-col :span="6">
                <a-range-picker
                  class="search-item"
                  v-model="DateRange"
                  @change="getTableData"
                  style="width: 100%"
                >
                  <template #prefix> 更新日期 </template>
                </a-range-picker>
              </a-col>
              <a-col :span="6" style="align-self: center">
                <a-link @click="resetFilter">重置</a-link>
              </a-col>
            </a-row>
          </div>
        </div>
        <div
          class="table-box w-full overflow-hidden"
          :style="{
            height: 'auto',
            maxHeight: moreFilterKey ? 'calc(100% - 192px)' : 'calc(100% - 92px)'
          }"
        >
          <div>
            <CommonTable
              :loading="loading"
              :scrollbar="true"
              :tableData="listData"
              :columnsData="columns"
              :pageTotal="listData.length"
              :operatorCollapse="4"
              :scroll="{ x: '101%', y: '100%' }"
              @handlerPaginationChange="handlerPaginationChange"
            >
              <template #version="{ record }">
                <span>V{{ record.version }}.0</span>
              </template>
              <template #cost_status="{ record }">
                <span
                  v-if="record.cost_status === '已入表' || '撤回修改'"
                  class="flex justify-start items-center"
                >
                  <div class="circle-point border-[#34C94F] mr-1"></div>
                  {{ record.cost_status }}
                </span>
                <span
                  v-else-if="record.cost_status === '待入表'"
                  class="flex justify-start items-center"
                >
                  <div class="circle-point border-[#FFAC38] mr-1"></div>
                  {{ record.cost_status }}
                </span>
              </template>
              <template #operator="{ record }">
                <a-button
                  :disabled="record.cost_status === '已入表'"
                  type="text"
                  @click="confirmEnterTable(record)"
                  >允许入表</a-button
                >
                <a-button type="text" @click="showDetail(record)">查看详情</a-button>
              </template>
            </CommonTable>
          </div>
        </div>
      </div>
    </template>
  </PageMain>
</template>
<script lang="ts" setup>
import { onMounted, ref, nextTick, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { columns } from './values';
import { getList as GetList } from '@/api/assetManagement/resource_project/index';
import { getList, costConfirm_get } from '@/api/costManagement/asset_cost/index';
import { Message } from '@arco-design/web-vue';

const options = ref<any>([]);
const router = useRouter();
const route = useRoute();
const RefLayout = ref();
const DateRange = ref([]);
// filter 筛选条件
const filterData = ref({
  asset_package_code: '', //资产编号
  asset_package_name: '', //资产名称
  update_time_end: '',
  update_time_start: '',
  project_id: '' //关联项目
});
const page = ref({
  page: 1,
  page_size: 10,
  total: 0
});
const moreFilterKey = ref(false);
// table表格数据
const listData = ref<any>([]);

function resetFilter() {
  filterData.value = {
    asset_package_code: '', //资产编号
    asset_package_name: '', //资产名称
    update_time_end: '',
    update_time_start: '',
    project_id: '' //关联项目
  };
  nextTick(() => {
    getTableData();
  });
}
/**
 * @method handlerPaginationChange 分页事件
 */
function handlerPaginationChange(type: string, num: number) {
  if (type === 'num') {
    page.value.page = num;
  } else {
    page.value.page = 1;
    page.value.page_size = num;
  }
  getTableData();
}

const loading = ref(false);
/**
 * @method getTableData 获取表格数据
 */

const getTableData = async () => {
  loading.value = true;
  try {
    let params = {
      page: page.value.page,
      page_size: page.value.page_size,
      ...filterData.value
    };
    if (DateRange.value.length > 0) {
      params.update_time_start = DateRange.value[0];
      params.update_time_end = DateRange.value[1];
    }
    let { data, total, code } = await getList(params);
    if (code === '00000') {
      page.value.total = total;
      listData.value = data;
      loading.value = false;
      return;
    }
  } catch (e) {
    loading.value = false;
  }
};

const getProjectList = async () => {
  GetList({
    page: 1,
    page_size: 100
  })
    .then((res: any) => {
      if (res.code === '00000') {
        options.value = res.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

/**
 * @method confirmEnterTable 允许入表
 */
const confirmEnterTable = async (item: any) => {
  let res = await costConfirm_get({ asset_package_id: item.id, status: '已入表' });
  if (res.code === '00000') {
    Message.success('入表成功');
  } else {
    Message.error(`${res.message}`);
  }
  await getTableData();
};

/**
 * @method showDetail 查看详情
 */
function showDetail(item: any) {
  const { id } = item;
  if (!id) return;
  router.push({
    name: 'AssetCostDetail',
    query: {
      id: id
    }
  });
}

function watchEnterHandler(e: KeyboardEvent) {
  if (route.name != 'AssetCostList') return;
  if (e.key === 'Enter') {
    getTableData();
  }
}

onUnmounted(() => {
  // 移除键盘监听
  window.removeEventListener('keydown', watchEnterHandler);
});

onMounted(() => {
  getTableData();
  getProjectList();
  window.addEventListener('keydown', watchEnterHandler);
});
</script>

<style lang="less" scoped>
.circle-point {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-width: 2px;
}
.more-filter-box {
  .arco-row {
    .arco-col {
      padding: 0 10px;
      box-sizing: border-box;
    }
  }
}
</style>

<style lang="less">
.chunk-delete-box {
  .arco-modal-wrapper {
    .arco-modal {
      padding: 0px;
      .arco-modal-header,
      .arco-modal-footer {
        border: 0;
      }
      .arco-modal-body {
        .chunk-delete-info-box {
          svg {
            color: #f1aa3c;
            width: 20px;
            height: 20px;
            position: relative;
            top: 2px;
          }
        }
      }
    }
  }
}
.search-item {
  border: 1px solid #d3dbeb;
  background-color: #fff;
  border-radius: 4px;
}
</style>
